<template>
  <div class="main">
    <!-- 留言板信息统计 -->
    <div>
      <div ref="div_echarts" class="echarts"></div>
    </div>

    <BackToHome />
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
import { log } from '../../ts/logger'
import { ApiService } from '../../ts/ApiService'
import { BaseDataResult } from '../../ts/types/BaseResult'
import { ChartGroupData } from '../../ts/types/Charts'
import { ElMessage } from 'element-plus'
import BackToHome from '../../components/BackToHomeComp.vue'

const div_echarts = ref(null)
const chart = ref({} as echarts.EChartsType)
const legends = ref([] as Array<String>)
const xaxis = ref([] as Array<String>)
const series = ref([] as Array<SeriesData>)

type SeriesData = {
  name: String
  type: String
  data: Array<Number>
}

const options = ref({
  // 上方图示
  legend: {
    data: legends,
    top: 'top',
    left: 'right',
  },
  title: {
    text: '发帖信息统计',
    left: 'left',
    textAlign: 'left',
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: xaxis,
  },
  yAxis: {
    type: 'value',
  },
  series: series,
})

const initMessageInfo = () => {
  ApiService.get('/charts/message', {}, (data: BaseDataResult<ChartGroupData>) => {
    log.debug('获取留言信息统计数据', data)
    if (data.success) {
      xaxis.value = data.data.axis
      legends.value = data.data.group
      log.debug('series====>', legends.value, data.data.group)
      data.data.series.forEach((v, i) => {
        series.value.push({
          name: legends.value[i],
          type: 'line',
          data: v,
        })
      })
      log.debug('options====>', options.value)
      chart.value.setOption(options.value as echarts.EChartOption)
    } else {
      ElMessage.error(data.message)
    }
  })
}

onMounted(() => {
  chart.value = echarts.init(div_echarts.value)
  chart.value.setOption(options.value as echarts.EChartOption)
  initMessageInfo()
})
</script>

<style lang="scss" scoped>
.main {
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
}
.echarts {
  width: 90vw;
  height: 90vh;
}
</style>
